<!--
 * @author wangpeizhi
 -->
<template>
  <div id="dictManage">
    <div class="btn-container">
      <div class="btn-container-title">
        <span>字典管理</span>
      </div>
      <div class="btn-container-btns">
        <el-button class="filter-item" style="margin-left: 10px;margin-bottom: 0;" @click="handleCreateDict">新增字典</el-button>
        <el-button v-permission="'dictManageUpdate'" class="filter-item" style="margin-left: 10px;margin-bottom: 0;" @click="handleUpdateDict">编辑字典</el-button>
        <el-button class="filter-item" style="margin-left: 10px;margin-bottom: 0;" @click="handleDeleteDict">删除字典</el-button>
      </div>
    </div>
    <el-container class="enterpriseinfo">
      <split-pane split="vertical" :min-percent="0" :default-percent="28">
        <template slot="paneL">
          <div class="leftWrap">
            <div class="search-tree-wrap">
              <el-input v-model="treeName" style="width:75%" placeholder="输入关键字搜索" class="search-input" clearable @clear="clearSearchTree" />
              <el-button class="filter-item tree-filter" type="primary" @click="handleFilterTree">搜索</el-button>
            </div>
            <el-tree
              ref="qytree"
              v-loading="treeLoading"
              :data="treeData"
              :props="defaultProps"
              :expand-on-click-node="false"
              class="dictTree"
              highlight-current
              node-key="id"
              :filter-node-method="filterNode"
              @node-click="handleTreeClick"
            />
          </div>
        </template>
        <template slot="paneR">
          <el-main class="user-main">
            <div v-if="!isShow" class="ts-con">
              <div class="ts">
                <i class="el-icon-info" />
                <span v-html="showMsg" />
              </div>
            </div>
            <div v-else id="enterpriseinfo-container">
              <el-collapse-transition>
                <div v-show="searchshow" class="course-search merge">
                  <span class="svg-container">
                    <svg-icon icon-class="search" />
                  </span>
                  <el-input v-model.trim="search.globalSearch" placeholder="请输入字典项/字典值搜索" class="search-input" />
                  <div class="course-search-btn">
                    <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
                    <el-button class="filter-item" type="primary" @click="handleReset">重置</el-button>
                    <span class="course-search-more" @click="searchshow = !searchshow">
                      更多筛选条件
                      <i class="el-icon-arrow-down" />
                    </span>
                  </div>
                </div>
              </el-collapse-transition>
              <el-collapse-transition>
                <div v-show="!searchshow" class="course-search separate">
                  <div class="course-search-inner">
                    <el-row>
                      <el-col :span="12">
                        <div class="search-inner-item">
                          <div class="item-label">字典项</div>
                          <el-input v-model.trim="search.dictName" style="width: 80%;" class="filter-item" placeholder="请输入字典项搜索" />
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="search-inner-item">
                          <div class="item-label">字典值</div>
                          <el-input v-model.trim="search.dictValue" style="width: 80%;" class="filter-item" placeholder="请输入字典值搜索" />
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="course-search-btn">
                    <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
                    <el-button class="filter-item" type="primary" @click="handleReset">重置</el-button>
                    <span class="course-search-more" @click="searchshow = !searchshow">
                      精简筛选条件
                      <i class="el-icon-arrow-up" />
                    </span>
                  </div>
                </div>
              </el-collapse-transition>
              <div class="btn-container">
                <div class="btn-container-title">
                  <span>
                    字典项管理
                    <span v-if="dictName">,当前选择</span>
                    <span v-if="dictName" class="btn-container-title-select">{{ dictName }}</span>
                  </span>
                </div>
                <div class="btn-container-btns">
                  <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate">新建字典项</el-button>
                  <!-- <el-button v-permission="'dictManageDeletesP'" class="filter-item" style="margin-left: 10px;" @click="handleDeletes">批量删除</el-button> -->
                </div>
              </div>
              <div class="table">
                <my-table :list="list" tag="dict" operationwidth="80" :list-loading="listLoading" @handleSelectionChange="handleSelectionChange">
                  <el-table-column label="操作" fixed="right" align="center" min-width="140" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button v-permission="'dictManageInsertChild'" type="text" size="mini" @click="addChild(scope.row)">新增下级</el-button>
                      <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                      <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </my-table>
              </div>
            </div>
          </el-main>
        </template>
      </split-pane>
      <el-dialog v-el-drag-dialog title="新建/编辑字典" :visible.sync="centerDialogVisible" width="700px" :close-on-click-modal="false" center>
        <el-form ref="dictDataForm" :model="dictObj" :rules="dictRules" class="dataForm" label-position="right" label-width="80px" style="height: 410px">
          <el-form-item label="字典代码" prop="dictCode">
            <el-input v-model="dictObj.dictCode" style="width:100%;" placeholder="请输入字典代码" />
          </el-form-item>
          <el-form-item label="字典项" prop="dictName">
            <el-input v-model="dictObj.dictName" style="width:100%;" placeholder="请输入字典项" />
          </el-form-item>
          <el-form-item label="字典值" prop="dictValue">
            <el-input v-model="dictObj.dictValue" style="width:100%;" placeholder="请输入字典值" />
          </el-form-item>
          <el-form-item label="状态" prop="dictStatus">
            <el-radio-group v-model="dictObj.dictStatus">
              <el-radio v-for="v in dict.ZT" :key="v.dictValue" :label="v.dictValue">{{ v.dictName }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序号" prop="dictSort">
            <el-input v-model="dictObj.dictSort" style="width:100%;" placeholder="请输入排序号" />
          </el-form-item>
          <el-form-item label="备注" prop="dictRemark">
            <el-input v-model="dictObj.dictRemark" type="textarea" :autosize="{ minRows: 4, maxRows: 9}" placeholder="请输入备注" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button style="padding: 10px 30px;" @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogStatus=='create'?createDictData():updateDictData()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog v-el-drag-dialog :close-on-click-modal="false" title="新建/编辑字典项" :visible.sync="centerDialogVisible1" width="700px" center>
        <el-form ref="dataForm" :model="temp" :rules="rules" class="dataForm" label-position="right" label-width="80px" style="height: 410px">
          <el-form-item label="字典代码" prop="dictCode">
            <el-input v-model="temp.dictCode" :disabled="true" style="width:100%;" placeholder="请输入字典代码" />
          </el-form-item>
          <el-form-item label="字典项" prop="dictName">
            <el-input v-model="temp.dictName" style="width:100%;" placeholder="请输入字典项" />
          </el-form-item>
          <el-form-item label="字典值" prop="dictValue">
            <el-input v-model="temp.dictValue" style="width:100%;" placeholder="请输入字典值" />
          </el-form-item>
          <el-form-item label="状态" prop="dictStatus">
            <el-radio-group v-model="temp.dictStatus">
              <el-radio v-for="v in dict.ZT" :key="v.dictValue" :label="v.dictValue">{{ v.dictName }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序号" prop="dictSort">
            <el-input v-model="temp.dictSort" style="width:100%;" placeholder="请输入排序号" />
          </el-form-item>
          <el-form-item label="备注" prop="dictRemark">
            <el-input v-model="temp.dictRemark" type="textarea" :autosize="{ minRows: 4, maxRows: 9}" placeholder="请输入备注" />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button style="padding: 10px 30px;" @click="centerDialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="dialogStatus=='create'?createData():updateData()">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import { specialText, number } from '@/utils/validate'
import { getDictTree, getDictEntryByCode, updateDictEntry, deleteDictEntry, getDictEntry, getDictByCode } from '@/views/dictmanage/api/index'
import { mapGetters } from 'vuex'
import permission from '@/directive/permission/index.js' // 权限判断指令
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import MyTable from '@/components/Table'
import splitPane from 'vue-splitpane'
export default {
  name: 'DictManage',
  components: { MyTable, splitPane },
  directives: { permission, elDragDialog },
  data() {
    return {
      centerDialogVisible1: false,
      centerDialogVisible: false,
      listLoading: false,
      searchshow: true,
      treeLoading: false,
      submitloading: false,
      isShow: true,
      treeprops: {
        children: 'list'
      },
      showMsg: '单击左侧菜单项进行维护',
      treeData: [],
      defaultProps: {
        children: 'list',
        label: 'dictName'
      },
      dictName: '',
      treeName: '',
      dialogStatus: '',
      superId: '',
      list: [],
      search: {
        dictName: '',
        dictValue: '',
        globalSearch: ''
      },
      temp: {
        parentId: '',
        id: '',
        dictName: '',
        dictCode: '',
        dictValue: '',
        dictSort: '',
        dictRemark: '',
        dictStatus: ''
      },
      rules: {
        dictCode: [
          { required: true, message: '请输入字典代码', trigger: 'blur' }
        ],
        dictName: [
          { required: true, message: '请输入字典项', trigger: 'blur' },
          { validator: specialText, trigger: 'blur' }
        ],
        dictValue: [
          { required: true, message: '请输入字典值', trigger: 'blur' }
        ],
        dictSort: [{ validator: number, trigger: 'blur' }],
        dictStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      /**
       * 字典对象
       */
      dictObj: {
        parentId: 1,
        id: '',
        dictName: '',
        dictCode: '',
        dictValue: '',
        dictSort: '',
        dictRemark: '',
        dictStatus: ''
      },
      dictRules: {
        dictCode: [
          { required: true, message: '请输入字典代码', trigger: 'blur' }
        ],
        dictName: [
          { required: true, message: '请输入字典项', trigger: 'blur' },
          { validator: specialText, trigger: 'blur' }
        ],
        dictValue: [
          { required: true, message: '请输入字典值', trigger: 'blur' }
        ],
        dictSort: [{ validator: number, trigger: 'blur' }],
        dictStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      superIdType: 0,
      dictCode: '',
      dictId: '',
      multipleSelection: [],
      dict: {
        ZT: [] // 状态
      },
      childInsert: false,
      childId: '',
      parentClick: false

    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
    for (const key in this.dict) {
      this.getDict(key)
    }
    this.getTreeData()
    this.getList()
  },
  methods: {
    /**
     * 获取字典
     */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code).then(response => {
          this.dict[code] = (response.data.data && response.data.data.length > 0) ? response.data.data[0].list : []
        }).catch(error => {
          reject(error)
        })
      })
    },

    resetDictObj() {
      this.dictObj = {
        parentId: 1,
        id: '',
        dictName: '',
        dictCode: '',
        dictValue: '',
        dictSort: '',
        dictRemark: '',
        dictStatus: ''
      }
    },

    /**
     * 新增字典
     */
    handleCreateDict() {
      this.dialogStatus = 'create'
      this.resetDictObj()
      this.$nextTick(() => {
        this.$refs['dictDataForm'].clearValidate()
      })
      this.centerDialogVisible = true
    },

    /**
     * 编辑字典
     */
    handleUpdateDict() {
      if (this.dictId && this.parentClick === true) {
        return new Promise((resolve, reject) => {
          getDictEntry({ id: this.dictId }).then((res) => {
            this.dictObj.id = res.data.data.id || ''
            this.dictObj.parentId = res.data.data.parentId || ''
            this.dictObj.dictName = res.data.data.dictName || ''
            this.dictObj.dictCode = res.data.data.dictCode || ''
            this.dictObj.dictValue = res.data.data.dictValue || ''
            this.dictObj.dictSort = res.data.data.dictSort || ''
            this.dictObj.dictRemark = res.data.data.dictRemark || ''
            this.dictObj.dictStatus = res.data.data.dictStatus || ''
            this.dialogStatus = 'update'
            this.centerDialogVisible = true
            this.$nextTick(() => {
              this.$refs['dictDataForm'].clearValidate()
            })
          }).catch(error => {
            reject(error)
          })
        })
      } else {
        this.$message({
          message: '请先选择要编辑的字典！',
          type: 'warning'
        })
      }
    },

    /**
     * 删除字典
     */
    handleDeleteDict() {
      if (this.dictId) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteDict(this.dictId)
        }).catch(() => { })
      } else {
        this.$message({
          message: '请先选择要删除的字典！',
          type: 'warning'
        })
      }
    },

    handleSelectionChange(arr) {
      this.multipleSelection = arr
    },

    /**
     * 添加字典
     */
    createDictData() {
      this.$refs['dictDataForm'].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            updateDictEntry(this.dictObj).then(() => {
              this.centerDialogVisible = false
              loading.close()
              this.$message({
                message: '创建成功！',
                type: 'success'
              })
              this.getTreeData()
            }).catch(error => {
              reject(error)
              loading.close()
            })
          })
        }
      })
    },

    /**
     * 编辑字典
     */
    updateDictData() {
      this.$refs['dictDataForm'].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            updateDictEntry(this.dictObj).then(() => {
              this.centerDialogVisible = false
              loading.close()
              this.$message({
                message: '编辑成功！',
                type: 'success'
              })
              this.getTreeData()
            }).catch(error => {
              reject(error)
              loading.close()
            })
          })
        }
      })
    },

    /**
     * 删除字典
     */
    deleteDict(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        deleteDictEntry(id).then(() => {
          loading.close()
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.getTreeData()
        }).catch(error => {
          reject(error)
          loading.close()
        })
      })
    },

    /**
     * 字典项查询
     */
    handleFilter() {
      this.getList()
    },

    /**
     * 查询条件重置
     */
    handleReset() {
      for (const i in this.search) {
        if (this.search['' + i + ''] instanceof Array) {
          this.search['' + i + ''] = []
        } else {
          this.search['' + i + ''] = ''
        }
      }
      this.getList()
    },

    /**
     * 字典树点击
     */
    handleTreeClick(data) {
      // this.parentId = data.parentId || '';
      this.dictName = data.dictName
      this.dictCode = data.dictCode || ''
      this.temp.dictCode = data.dictCode || ''
      this.dictId = data.id
      this.parentClick = true
      this.getList()
    },

    /**
     * 清空搜索
     */
    clearSearchTree() {
      this.treeName = ''
      this.$refs.qytree.filter('')
    },

    /**
     * 按名称查询
     */
    handleFilterTree() {
      this.$refs.qytree.filter(this.treeName)
    },

    filterNode(value, data) {
      if (!value) return true
      return data.dictName.indexOf(value) !== -1
    },

    /**
     * 获取字典树
     */
    getTreeData() {
      this.treeLoading = true
      return new Promise((resolve, reject) => {
        getDictTree().then(response => {
          this.treeLoading = false
          this.treeData = response.data.data
        }).catch(error => {
          reject(error)
          this.treeLoading = false
        })
      })
    },

    /**
     * 获取字典项列表
     */
    getList() {
      const _this = this
      _this.listLoading = true
      var query = {
        dictCode: this.dictCode
      }
      if (this.searchshow) {
        query['globalSearch'] = this.search.globalSearch
      } else {
        query['dictName'] = this.search.dictName
        query['dictValue'] = this.search.dictValue
      }
      return new Promise((resolve, reject) => {
        getDictEntryByCode(query).then(response => {
          _this.listLoading = false
          _this.list = response.data.data
        }).catch(error => {
          _this.listLoading = false
          reject(error)
        })
      })
    },

    resetTemp() {
      this.temp = {
        parentId: this.dictId,
        id: '',
        dictName: '',
        dictCode: this.dictCode,
        dictValue: '',
        dictSort: '',
        dictRemark: '',
        dictStatus: ''
      }
    },

    /**
     * 新建字典项
     */
    handleCreate() {
      if (this.dictCode && this.parentClick === true) {
        this.dialogStatus = 'create'
        this.centerDialogVisible1 = true
        this.resetTemp()
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else {
        this.$message({
          message: '请先选择左侧字典树的字典！',
          type: 'warning'
        })
      }
    },
    /**
    * 新增下级
    */
    addChild(row) {
      // alert(row.id);
      this.dialogStatus = 'create'
      this.centerDialogVisible1 = true
      this.childInsert = true
      this.childId = row.id
      this.dictCode = row.dictCode
      this.resetTemp()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },

    /**
     * 编辑字典项
     */
    handleUpdate(row) {
      if (row.id) {
        return new Promise((resolve, reject) => {
          getDictEntry({ id: row.id }).then((res) => {
            this.temp.id = res.data.data.id || ''
            this.temp.parentId = res.data.data.parentId || ''
            this.temp.dictName = res.data.data.dictName || ''
            this.temp.dictCode = res.data.data.dictCode || ''
            this.temp.dictValue = res.data.data.dictValue || ''
            this.temp.dictSort = res.data.data.dictSort || ''
            this.temp.dictRemark = res.data.data.dictRemark || ''
            this.temp.dictStatus = res.data.data.dictStatus || ''
            this.dialogStatus = 'update'
            this.centerDialogVisible1 = true
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          }).catch(error => {
            reject(error)
          })
        })
      } else {
        this.$message({
          message: '获取数据失败！',
          type: 'warning'
        })
      }
    },

    /**
     * 批量删除字典项
     */
    handleDeletes() {
      if (this.multipleSelection.length > 0) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const arrid = []
          this.multipleSelection.forEach(item => {
            arrid.push(item.id)
          })
          const ids = arrid.join(',')
          this.deleteDictEntry(ids)
        }).catch(() => { })
      } else {
        this.$message({
          message: '请选择需要删除的数据！',
          type: 'warning'
        })
      }
    },

    /**
     * 删除字典项
     */
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDictEntry(row.id)
      }).catch(() => { })
    },

    /**
     * 新增字典项
     */
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          if (this.childInsert === true) {
            this.temp.parentId = this.childId
          } else {
            this.temp.parentId = this.dictId
          }
          return new Promise((resolve, reject) => {
            updateDictEntry(this.temp).then(() => {
              this.isShow = true
              this.centerDialogVisible1 = false
              loading.close()
              this.$message({
                message: '创建成功！',
                type: 'success'
              })
              this.childId = ''
              this.childInsert = false
              this.getList()
            }).catch(error => {
              reject(error)
              loading.close()
            })
          })
        }
      })
    },

    /**
     * 编辑字典项
     */
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            updateDictEntry(this.temp).then(res => {
              this.isShow = true
              this.centerDialogVisible1 = false
              loading.close()
              this.$message({
                message: '编辑成功！',
                type: 'success'
              })
              this.getList()
            }).catch(error => {
              reject(error)
              loading.close()
            })
          })
        }
      })
    },
    deleteDictEntry(ids) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        deleteDictEntry(ids).then(() => {
          loading.close()
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.getList()
        }).catch(error => {
          reject(error)
          loading.close()
        })
      })
    },

    updateTreeChildren(data) {
      const node = this.$refs.qytree.getNode(this.temp.superId)
      if (!node) return
      const childNodes = node.childNodes
      for (let i = childNodes.length - 1; i >= 0; i--) {
        const child = childNodes[i]
        this.$refs.qytree.remove(child.data)
      }
      for (let i = 0, j = data.length; i < j; i++) {
        const child = data[i]
        this.$refs.qytree.append(child, node.data)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/scss">
$dark_gray: #bfced6;
#dictManage {
  padding: 10px;
  .enterpriseinfo {
    height: calc(100vh - 122px);
    padding: 0px;
		overflow: hidden;
		.vue-splitter-container{
			width: 100%;
			overflow: hidden;
		}
    .leftWrap {
      background: #fff;
      margin-right: 10px;
      padding: 10px;
			height: 100%;
			overflow-y: auto;
      .search-tree-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tree-filter {
          padding: 10px 18px;
        }
      }
    }
    .user-main {
      padding: 10px;
      position: relative;
      background-color: #fff;
			height: 100%;
			overflow-y: auto;
      .course-search {
        background-color: #fff;
        padding: 0 10px;
        .svg-container {
          padding: 0 5px 0 10px;
          color: $dark_gray;
          vertical-align: middle;
          display: inline-block;
          &_login {
            font-size: 10px;
          }
        }
        .search-input {
          width: 50%;
          position: relative;
          &:after {
            content: '';
            position: absolute;
            left: -25px;
            right: 0;
            bottom: 8px;
            height: 1px;
            background: rgba(226, 227, 232, 1);
          }
          input {
            outline: none;
            background: transparent;
            border: none;
            outline: medium;
            padding: 0;
            &:focus {
              outline: none;
              background-color: transparent;
            }
          }
        }
        .course-search-btn {
          display: inline-block;
          float: right;
          .el-button.is-round {
            padding: 10px 30px;
            margin-right: 34px;
          }
          .course-search-more {
            font-size: 14px;
            font-weight: 500;
            @include font-color($mainColor);
            cursor: pointer;
            margin-left: 10px;
          }
        }
        &.merge {
          height: 50px;
          line-height: 50px;
        }
        &.separate {
          .course-search-inner {
            padding-top: 10px;
            .search-inner-item {
              .item-label {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #a6a6a6;
                font-weight: 400;
              }
              .el-input {
                position: relative;
                .el-input__inner {
                  border: none;
                  padding: 0;
                }
                &:after {
                  content: '';
                  height: 1px;
                  background-color: #e2e3e8;
                  position: absolute;
                  left: 0;
                  right: 0;
                  bottom: 0;
                }
              }
            }
          }
          .course-search-btn {
            text-align: center;
            display: block;
            float: none;
            height: 56px;
            line-height: 56px;
          }
        }
      }
      .ts-con {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: white;
        .ts {
          line-height: 30px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-top: -15px;
          margin-left: -110px;
          width: 210px;
          text-align: center;
          background: white;
          border-radius: 2px;
          box-shadow: 1px 1px 5px #e0dbdb;
          font-size: 14px;
          font-family: Microsoft Yahei In-Bold, Microsoft Yahei,
            Apple LiGothic Medium;
          color: #222222;
        }
      }
    }
  }
  .sysconfig-search {
    background-color: #fff;
    padding: 5px 10px;
    margin-bottom: 10px;
    .svg-container {
      padding: 0 5px 0 10px;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;
      &_login {
        font-size: 10px;
      }
    }
    .search-input {
      width: 78%;
      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;
        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }
    .el-button.is-round {
      float: right;
      padding: 10px 30px;
    }
  }
  .btn-container {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .btn-container-title {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      .btn-container-title-select {
        @include font-color($mainColor);
      }
    }
  }
}
</style>
